/**
	Poodle WCMS, Copyright (c) ByYourSite since 2010. All rights reserved.
*/

input.color,
input[type="text"].color,
input.date,
input.datetime,
input.datetime-local,
input.month,
input.week,
.input-date a,
.input-datetime a,
.input-datetime-local a,
.input-month a,
.input-week a
{
	background-image: url(../images/forms/inputs.png);
	background-repeat: no-repeat;
	background-position: 0 center;
	width:16px;
}

/* Remove box shadow that browsers put around required fields.
 * http://www.w3.org/TR/css3-ui/#pseudo-validity
 */
input:invalid,
textarea:invalid {
	box-shadow:0 0 1px 1px #F00;
}

/* ie (faux placeholder) */
input.placeholder,
textarea.placeholder {
	color:#999;
	font-style:italic;
}
input:placeholder,
textarea:placeholder {
	color:#999;
	font-style:italic;
}
textarea { resize:both }
/* Alternative for browsers that don't support <datalist> (Chrome, IE) */
.combobox { position:relative; }
.combobox .datalist {
	background-color:#EEE;
	border:1px solid #000;
	font-size:75%;
	height:auto;
	left:0;
	max-height:8em;
	overflow:auto;
	padding:0;
	position:absolute;
	right:0;
	top:20px;
	white-space:nowrap;
}
.combobox .datalist * {
	display:block;
}

/******************************************************************************
 *
 * input type="date|datetime|datetime-local|month|week"
 *
 ******************************************************************************/

input.date,
input.datetime,
input.datetime-local,
input.month,
input.week
{
	background-image: none;
/*	background: url(../images/forms/input-date.png) no-repeat 100% center;
	padding-right:20px;
/*	background-position: -158px center;
	padding-left:20px;*/
	width:12em;
}
input.date     { width: 6.5em; }
input.datetime { width: 12em; }
input.month    { width: 4.8em; }
input.week     { width: 5.5em; }
input.time     { width: 5.5em; }

input.date,
input.datetime,
input.datetime-local,
input.month,
input.week
{
	margin:0;
}

.input-date a,
.input-datetime a,
.input-datetime-local a,
.input-month a,
.input-week a
{
	background-color:#EEE;
	background-position:-158px center;
	border:1px solid #CCC;
	border-radius:1px;
	display:inline-block;
	height:20px;
	margin-left:1px;
	vertical-align: top;
	width:16px;
}
.input-date a:focus,
.input-datetime a:focus,
.input-datetime-local a:focus,
.input-month a:focus,
.input-week a:focus
{
	border-color:#999;
	outline:0;
}

#poodle-calendar, #poodle-calendar td { font-size:11px; }

#poodle-calendar,
#poodle-colorpicker
{
	border:1px solid #CCC;
/*	border:1px solid ThreeDShadow;
	border-top-color:ThreeDLightShadow;
	border-left-color:ThreeDLightShadow;*/
	border-radius: 4px;
	box-shadow:0 0 1px 1px #47aee8;
	color:WindowText;
	position:absolute;
	visibility:visible;
	z-index:2147483641;
}

#poodle-calendar {
	background-color:#fff;
	color:#000;
}
#poodle-calendar a { color:#000; }

#poodle-calendar .select:after,
#poodle-calendar .selectTime:after {
	color:#888;
	content: '▼';
	position:absolute;
	right:2px;
}

/* content */

#poodle-calendar table { border-collapse:separate; clear:both; margin:0; width: 100%; }
#poodle-calendar table.month { display:none; }
#poodle-calendar td {
	padding:3px;
	text-align:center;
}
#poodle-calendar .weekend {
	color:#888;
}
#poodle-calendar tbody td + td { background-color:#fff; border:1px solid transparent; color:#000; cursor:pointer; }
#poodle-calendar tbody td + td:hover,
#poodle-calendar table.month tbody:hover td + td,
#poodle-calendar table.week tbody tr:hover td { background-color:#888; color:HighlightText }
#poodle-calendar #weekdays td,
#poodle-calendar #weekdays td:hover {
	border:0;
	border-bottom:1px solid #CCC;
}
#poodle-calendar .weekno,
#poodle-calendar .weekno:hover {
	border:1px solid #CCC;
	border-top:0;
	border-left:0;
}
#poodle-calendar tbody tr:last-of-type .weekno {
	border-bottom:0;
}
#poodle-calendar .activeDay {
	border:1px solid #888;
	color:#888;
}

/* dropdown */

#poodle-calendar .cal-select {
	background-color: #FFF;
	border:1px solid #CCC;
	display:none;
	position:absolute;
	top:15px;
	z-index:2147483647; /* is max value*/
}
#poodle-calendar .cal-select div {
	cursor:pointer;
	margin:1px;
	padding:1px;
}
#poodle-calendar .cal-select div:hover {
	background-color:Highlight;
}
#poodle-calendar .current {
	background-color:Highlight;
	color:HighlightText;
}

/* caption */

#poodle-calendar .caption {
	background-color:#EEE;
	border-bottom:1px solid #CCC;
	border-radius:2px 2px 0 0;
	min-height:1.5em;
	padding:0;
	white-space:nowrap;
}

#poodle-calendar .todaysDateString,
#poodle-calendar .save,
#poodle-calendar .selectTime,
#poodle-calendar .caption a
{
	border-left:1px solid #fff;
	border-right:1px solid #DDD;
	cursor:pointer;
	display:inline-block;
	margin:0;
	text-decoration:none;
}
#poodle-calendar .todaysDateString:hover,
#poodle-calendar .save:hover,
#poodle-calendar .selectTime:hover,
#poodle-calendar .caption a:focus,
#poodle-calendar .caption a:hover
{
	box-shadow:0 0 1px 1px #47aee8;
}
#poodle-calendar .todaysDateString:active,
#poodle-calendar .save:active,
#poodle-calendar .selectTime:active,
#poodle-calendar .caption a:active
{
/*	border:1px solid ButtonHighlight;
	border-top-color:ButtonShadow;
	border-left-color:ButtonShadow;*/
}

#poodle-calendar .prevMonth,
#poodle-calendar .nextMonth,
#poodle-calendar .caption .close
{
	color:#888;
	height:21px;
	line-height:21px;
	text-align:center;
	width:22px;
}
#poodle-calendar .caption .prevMonth { border-left:0; }
#poodle-calendar .prevMonth:after { content: '◀'; }
#poodle-calendar .nextMonth:after { content: '▶'; }
#poodle-calendar .caption .close { border-right:0; font-weight:bold; }

#poodle-calendar .select
{
	line-height:21px;
	padding:0 1px;
	padding-left:2px;
	position:relative;
}
#poodle-calendar .year { width:4em; }
#poodle-calendar #yearDropDown { left: 12.2em; width:4em; }
#poodle-calendar .month { width:7.5em; }
#poodle-calendar #monthDropDown { left: 48px; width:7.5em; }

#poodle-calendar .caption .close:after {content:'x'}
#poodle-calendar .caption .close:active,
#poodle-calendar .caption .close:hover {
	color:#C00;
	box-shadow:0 0 1px 1px #C66;
}

/* bottomBar */

#poodle-calendar .todaysDate {
	background-color:#EEE;
	border-top: 1px solid #CCC;
	line-height:21px;
	position:relative;
}
#poodle-calendar .todaysDateString
{
	border-left:0;
	padding:0 18px;
}
#poodle-calendar .save {
	bottom:0;
	display:none;
	padding:0 18px;
	top:0;
	position:absolute;
	right:0;
}
#poodle-calendar .timeBar
{
	bottom:0;
	display:none;
	top:0;
	position:absolute;
	right:0;
}
#poodle-calendar.month .save,
#poodle-calendar.datetime .timeBar,
#poodle-calendar.datetime-local .timeBar
{
	display:inline-block;
}
#poodle-calendar .selectTime
{
	padding:0 6px;
	position:relative;
	width: 2em;
}
#poodle-calendar .selectTime + div { border-right:0; }

#poodle-calendar #hourDropDown { right: 3.5em; width:3em; }
#poodle-calendar #minuteDropDown { right: 1px; width:3em; }

/******************************************************************************
 *
 * input type="color"
 *
 ******************************************************************************/

input.color,
input[type="color"],
form input.color {
	background-color: transparent;
	border:0;
	border-radius:0;
	cursor:pointer;
	height:16px;
	line-height:60px;
	padding:0;
	text-indent:-9000px;
}
input.color:focus { outline:1px dashed #CCC; }

#poodle-colorpicker .small .colors,
#poodle-colorpicker .big .colors,
#poodle-colorpicker .big .slider,
#poodle-colorpicker .big .slider i,
#poodle-colorpicker .big i.ws
{
	background-image:url(../images/forms/colorpicker.png);
	background-repeat:no-repeat;
}

#poodle-colorpicker {
	display:none;
	font-family:tahoma,verdana,sans-serif;
	font-size:10px;
}
#poodle-colorpicker,
#poodle-colorpicker .small .resize {
	background-color:ThreeDFace;
}

#poodle-colorpicker .small,
#poodle-colorpicker .big .clrGroup {
	background-image:url(../images/forms/cp-clr-bg.gif);
}
#poodle-colorpicker .small {
	border-radius:3px;
	display:none;
	height:21px;
	line-height:2px;
}
#poodle-colorpicker .small i {
	float:left;
	height:21px;
}
#poodle-colorpicker .small .color {
	border-radius: 3px 0 0 3px;
	width:26px;
}
#poodle-colorpicker .small .colors {
	background-position:0 100%;
	border-right:1px solid #FFF;
	cursor:crosshair;
	width:350px;
}
#poodle-colorpicker .resize {
	border-radius: 0 3px 3px 0;
	cursor:pointer;
	float:right;
	line-height:18px;
	text-align:center;
	font-size:11px;
	font-style:normal;
	width:21px;
}

#poodle-colorpicker .big {
	display:none;
	height:305px;
	position:relative;
	width:398px;
}
#poodle-colorpicker .big .top {
	line-height:21px;
	padding-left:6px;
}
#poodle-colorpicker .big .colors {
	background-color:#f00;
	border:2px inset #EEE;
	cursor:crosshair;
	height:256px;
	left:6px;
	position:absolute;
	top:22px;
	width:256px;
}
#poodle-colorpicker .big .slider {
	background-position:-291px 0;
	cursor:pointer;
	left:271px;
	padding:3px 10px;
	position:absolute;
	top:19px;
	width:21px;
}
#poodle-colorpicker .big .slider i {
	background-position:-264px 0;
	border:1px solid ThreeDShadow;
	border-right-color:ThreeDLightShadow;
	border-bottom-color:ThreeDLightShadow;
	cursor:pointer;
	display:block;
	height:256px;
	width:19px;
}
#poodle-colorpicker .big label {
	left:317px;
	line-height:18px;
	position:absolute;
	top:103px;
	width:60px;
}
#poodle-colorpicker .big label.H { top:100px; }
#poodle-colorpicker .big label.S { top:120px; }
#poodle-colorpicker .big label.L { top:140px; }
#poodle-colorpicker .big label.R { top:160px; }
#poodle-colorpicker .big label.G { top:180px; }
#poodle-colorpicker .big label.B { top:200px; }
#poodle-colorpicker .big label.A { top:220px; }
#poodle-colorpicker .big label input { float:right; padding:0 2px; width:3.5em; }
#poodle-colorpicker .big label.ws { top:286px; left:6px; width:auto; }
#poodle-colorpicker .big label.ws input { float:left;margin-right:4px; width:14px; }

#poodle-colorpicker .big label:after { position:absolute; right:-1em; top:0; } /* top required for IE8 */
#poodle-colorpicker .big label.H:after { content: "°"; }
#poodle-colorpicker .big label.S:after,
#poodle-colorpicker .big label.L:after,
#poodle-colorpicker .big label.A:after { content: "%"; }

#poodle-colorpicker .big button {
	bottom:46px;
	left:315px;
	margin:0;
	padding:0;
	position:absolute;
	width:74px;
}
#poodle-colorpicker .big button + button { bottom:23px; }
#poodle-colorpicker .big .clrGroup {
	border:2px inset #EEE;
	left:317px;
	position:absolute;
	top:22px;
	width:56px;
}
#poodle-colorpicker .big .clrGroup div {
	display:block;
	height:32px;
}
#poodle-colorpicker .big .clrGroup .orgClr { cursor:pointer; }

#poodle-colorpicker .big i.ws {
	background-position:-336px 0;
	width:14px;
	height:28px;
	cursor:pointer;
	position:absolute;
	top:62px;
	left:380px;
}

/******************************************************************************
 *
 * input type="checkbox" | type="radio"
 *
 ******************************************************************************/

.input-checkbox,
.input-radio {
	background-color: #fff;
	border:1px solid #CCC;
	display:inline-block;
	min-height:1em;
	overflow:hidden;
	position:relative;
	text-decoration:none;
	vertical-align: top;
	width:1em;
}
.input-radio { border-radius:100%; }
.input-checkbox input, .input-radio input {
	bottom:0;
	left: 0;
	margin:0;
	/*opacity:0;*/
	position: absolute;
	right:0;
	top: 0;
	visibility:hidden;
}

.input-checkbox:focus, .input-radio:focus {
	box-shadow: 0 0 1px 1px #47aee8;
	outline:none;
}

/*.input-checkbox.disabled:after,*/
.disabled .input-checkbox, .disabled .input-radio,
.input-checkbox.disabled, .input-radio.disabled { opacity:0.5; }

.input-checkbox:after,
.input-radio:after {
	/*color:#FAA;
	content: '⨯';
	text-shadow: 0 0 1px #FAA;*/
	bottom:0;
	font-size:125%;
	left: 0;
	line-height: 1;
	position: absolute;
	right:0;
	text-align:center;
	top: 0;
	width:100%;
}
.input-checkbox.checked:after {
	color:#080;
	content: '✔';
	text-shadow: 0 0 1px #AFA;
}
.input-radio.checked:after {
	color:#080;
	content: '⚫';
	font-size:110%;
	text-shadow: 0 0 1px #AFA;
}

/******************************************************************************
 *
 * input type="number"
 *
 ******************************************************************************/

.input-number {
	display: inline-block;
	padding-right:20px;
	position:relative;
}
.input-number input {
	text-align:right;
}
.input-number a {
	border-radius:1px;
	background-color: #EEE;
	border:1px solid #CCC;
	bottom:51%;
	box-shadow: inset 1px 1px 0 0 #fff;
	display:block;
	color:#888;
	font-size:8px;
	line-height:7px;
	padding:0 1px 1px 0;
	position:absolute;
	right:0;
	text-align:center;
	text-decoration:none;
	top:0;
	width:16px;
}
.input-number a + a {
	bottom:0;
	top:53%;
}
.input-number a:hover,
.input-number a:active,
.input-number a:focus {
	color:#000;
	background-color: #EEE;
}
.input-number a:active { border-style:inset; padding:1px 0 0 1px }
.input-number a:focus { outline:1px dashed #CCC; }

/******************************************************************************
 *
 * input type="range"
 *
 ******************************************************************************/

input.vertical[type="range"] {
	width:1em;
	height:6em;
}

form .input-range { height:18px; }
form .input-range-v { width:18px; }
form .input-range,
form .input-range-v {
	border-radius:2px;
	display:inline-block;
	overflow:hidden;
	position:relative;
	text-decoration:none;
}
form .input-range:focus,
form .input-range-v:focus { outline:1px dashed #CCC; }
form .input-range-v input { -webkit-appearance:slider-vertical; }

form .input-range i {
	bottom:0;
	top:0;
	width:4px;
}
form .input-range-v i {
	height:4px;
	left:0;
	right:0;
}
form .input-range i,
form .input-range-v i {
/*	background-color:ButtonFace;
	border:1px solid ButtonShadow;
	border-top-color:ButtonHighlight;
	border-left-color:ButtonHighlight;*/
	background-color:#EEE;
	border:1px outset #CCC;
	border-radius:1px;
	display:block;
	position:absolute;
	z-index:10;
}
form .input-range:focus i, form .input-range-v:focus i { box-shadow:0 0 1px 1px #47aee8; }

form .input-range input {
	height:1px;
	height:0;
	margin:0 2px;
	text-indent:-900em;
	line-height: 0;
	min-height: 0;
	vertical-align:middle;
}
form .input-range-v input[type="range"],
form .input-range-v input {
	width:1px;
	width:0;
	margin:0 8px 4px;
}
form .input-range input[type="range"],
form .input-range input,
form .input-range-v input[type="range"],
form .input-range-v input {
	background-color:rgba(107,107,107,0.6);
	border:1px inset ButtonFace;
	cursor:pointer;
	padding:0;
/*	visibility:hidden; /* make it hidden to show custom background */
}

.selectbox span { display:none; }
